<template>
<div class="profile">
  <el-card class="toTop">
    <div class="quote">
      {{message}}
    </div>
  </el-card>

  <el-card class="toTop">
    <div slot="header">
      <el-row>
        <el-col :span="4" style="font-size: 18px; margin-top: 10px">
          学生信息
        </el-col>
        <el-col :span="8" offset="12">
          <el-input v-model="search" placeholder="请输入查找账号" style="width: 80%" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px;"@click="load">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <div>
        <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="primary" size="small">导入</el-button>
        <el-button type="primary"size="small">导出</el-button>
      </div>
      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%;margin-top: 20px">
        <el-table-column
            prop="id"
            label="ID"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="username"
            label="账号">
        </el-table-column>
        <el-table-column
            prop="nickName"
            label="昵称">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
  <el-dialog title="添加信息"
      :visible.sync="dialogVisible"
      width="30%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickName"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save" >确 定</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
import request from "../utils/request";
import axios from "axios";
import row from "element-ui/packages/row/src/row";
export default {
  name: "proFile",
  components:{

  },
  data() {
    return {
      userName:'',
      dialogVisible:false,
      form: {
      },
      currentPage: 1,
      total:0,
      pageSize: 10,
      search: '',
      message:'今天月色真美。',
      tableData: []
    }
  },
  created() {
    this.load();
    let _this = this;//定义一个外部变量，将this的值付给它
    axios({
      method: 'get',
      url: 'https://v2.alapi.cn/api/qinghua?token=EH0lMfwmTQJQNcBZ&format=json'
    }).then(function (response) {
      console.log(response)
      _this.message = response.data.data.content;//调用该变量

    }).catch(resp => {
      console.log("请求失败：" + resp);
    })
  },
  methods: {
    load() {
      request.get("/user", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    add() {
      this.dialogVisible = true
      this.form = {}
    },
    save() {
      if (this.form.id) { //如果是更新
        request.put("/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load() // 刷新表格的数据
          this.dialogVisible = false  // 关闭弹窗
        })
      }
      else {
        request.post("/user", this.form).then(res => {
          console.log("****")
          this.load();
        })
        this.dialogVisible = false  // 关闭弹窗
        }
      },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleDelete(id) {
      console.log(id)
      request.delete("/user/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()  // 删除之后重新加载表格的数据
      })
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load();
    }
  },
}
</script>

<style scoped>

.toTop {
  margin-top: 15px;
}
.describe {
  background: #F1F1F1;
  font-size: 18px;
}
.describe :hover {
  background: #CFCFCF;
}
.describe div {
  color: #379688;
  font-size: 25px;
  margin-top: 10px;
}
.quote {
  margin-bottom: 10px;
  padding: 15px;
  line-height: 22px;
  border-left: 5px solid #009688;
  border-radius: 0 2px 2px 0;
  background-color: #f2f2f2;
}
</style>